<script setup>
import {computed, ref,watch} from 'vue'

const filter = ref('all')
const maxLength = 50
const newTodo = ref('')
const isshow = ref(false)
const arr = ref([
  {text:'学习vue.js前端应用框架',complated:false},
  {text:'学习vue.js前端应用框架',complated:false},
])

const todos = computed(()=>{
  if (filter.value === 'all') {
    return arr.value
  }else if (filter.value === 'unDone') {
    return arr.value.filter(item=> !item.complated)
  }else if (filter.value === 'Done') {
    return arr.value.filter(item=> item.complated)
  }
})



function addNewTodo() {
  const trimNewTodo = newTodo.value.trim()

  if (newTodo.value.length >50) {
    isshow.value=true;
    return
  }
  todos.value.push({text:trimNewTodo,complated:false})

  newTodo.value = ''
}

function delTodo(index){
  todos.value.splice(index,1)
}

function btnall(){
  filter.value = 'all'
}
function btnunDone(){
  filter.value = 'unDone'
}
function btnDone(){
  filter.value = 'Done'
}

watch(newTodo,()=>{
  if(newTodo.value.length > maxLength ){
    isshow.value=true
  }else{
    isshow.value = false
  }
})
</script>

<template>
  <div class="box">
    <div class="header">
      <h1>待办事项</h1>
      <input type="text" v-model="newTodo" placeholder="请输入代办事项，回车即可添加" @keyup.enter="addNewTodo">
      <p v-show="isshow">最多输入50个字符</p>
    </div>
    <div class="content">
      <ul >
        <li v-for="(todo,index) in todos" :key="index">
          <div>
            <input type="checkbox" v-model="todo.complated">
            <span>{{ todo.text }}</span>
          </div>
          <div class="del">
            <input type="button" value="删除" @click="delTodo(index)">
          </div>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <div class="left">
        <span>总计</span>
      </div>
      <div class="rigth">
        <input type="button" value="全部" @click="btnall">
        <input type="button" value="未完成" @click="btnunDone">
        <input type="button" value="已完成" @click="btnDone">
      </div>
    </div>
  </div>
</template>

<style>
* {
  margin: 0px;
  padding: 0px;
}

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 800px;
  height: 500px;
  border: 1px solid;
  background-color: #ddd;

  display: flex;
  flex-direction: column;
}

.header {
  border: 1px solid;
  height: 120px;

  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
}

.header>input[type=text] {
  width: 98%;
  height: 35px;
  border-radius: 10px;
  text-indent: 15px;
  border: none;
}

.content {
  flex: 1px;
}

.content ul {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 98%;
}

.content li {
  display: flex;
  justify-content: space-between;

  background-color: #fff;
  padding: 5px;
  text-indent: 5px;
  width: 98%;
}

.content li:first-child {
  border-radius: 10px 10px 0px 0px;
}

.content li:last-child {
  border-radius: 0px 0px 10px 10px;
}

.content span {
  margin-left: 10px;
}


.bottom {
  height: 50px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid;
}

.rigth>input[type=button]{
  border: none;
  background-color: transparent;
  margin: 10px;
}

.del{
display: none;
}
.content li:hover .del{
  display: block;
}

input[type=checkbox]:checked+span{
  text-decoration: line-through;
  color: #a39f9f;
}
</style>
